<template>
  <div class="nav-box">
    <h2>教学计划目录</h2>
    <ul>
      <li v-for="(item, idx) in timesList" :key="item.id">
        <div :class="['title', { active: item.showChilds }]" @click="toggleShow(item)">
          <i :class="[`el-icon-caret-${ item.showChilds ? 'bottom' : 'right'}`]" />
          <p><span>第{{ math.toChines(idx + 1) }}讲</span><span>{{ item.indexName }}</span></p>
        </div>
        <el-collapse-transition>
          <div v-show="item.showChilds">
            <div class="item-exam" v-if="item.exam" @click="preview('exam', item.exam, idx)" :class=" { active: item.type === 'exam' }">
              <p><span class="tip">进门考</span>  {{ item.exam.title }}</p>
              <el-button size="mini" type="primary" v-if="!item.exam.filePath" @click.stop="editContent('exam', item.exam.id)" round >编辑</el-button>
            </div>
            <div class="item-child" v-if="item.child" @click="preview('handout', item.child, idx)" :class=" { active: item.type === 'handout' }">
              <p><span class="tip">讲义</span> {{ item.child.name }}</p>
              <el-button size="mini" type="primary" v-if="!item.child.path" @click.stop="editContent('handout', item.child.handoutId);" round>编辑</el-button>
            </div>
            <div class="item-homework" v-if="item.homework" @click="preview('homework', item.homework, idx)" :class=" { active: item.type === 'homework' }">
              <p><span class="tip">课堂巩固</span> {{ item.homework.title }}</p>
              <el-button size="mini" type="primary" v-if="!item.homework.filePath" @click.stop="editContent('homework', item.homework.id)" round>编辑</el-button>
            </div>
            <!-- <div class="type-file" v-if="item.child.type === 1">
              <el-avatar shape="square" size="small" :src="''" icon="el-icon-files" />
              <p>{{ item.child.name }}</p>
            </div>
            <div class="type-other" v-else>
              <template v-if="item.child.childs.length">
                <div v-for="item in item.child.childs" :key="item.id">
                  <div class="item-title">
                    <h4>知识元</h4>
                    <p>{{ item.name }}</p>
                  </div>
                    <div class="item-main">
                      <div v-for="cell in item.child" :key="cell">
                        <p>{{ item.name }}</p>
                      </div>
                    </div>
                </div>
              </template>
              <div v-else align-center style="padding: 20px 0;">
                <span>该讲义暂无内容，请点击</span>
                <el-button type="text" @click.stop="editHandout(item.child.handoutId)">编辑讲义</el-button>
              </div>
            </div> -->
          </div>
        </el-collapse-transition>
      </li>
    </ul>
  </div>
  <div class="content-box">
    <template v-if="previewType === 'handout'">
      <template v-if="previewData.type === 1">
        <iframe :src="`${basePath}${previewData.path}`" frameborder="0"></iframe>
      </template>
      <template v-else>
        <HandoutPreviewComponent :handout="previewData.handoutId" class-preview v-if="previewData.handoutId"/>
      </template>
    </template>
    <template v-else-if="previewType === 'exam'"> 
      <template v-if="previewData.filePath">
        <iframe :src="`${basePath}${previewData.filePath}`" frameborder="0"></iframe>
      </template>
      <template v-else>
        <TestPaperPreview :previewNoRoute="true" :idNoRoute="previewData.id"/>
      </template> 
    </template>
    <template v-else-if="previewType === 'homework'"> 
      <template v-if="previewData.filePath">
        <iframe :src="`${basePath}${previewData.filePath}`" frameborder="0"></iframe>
      </template>
      <template v-else>
        <TestPaperPreview :previewNoRoute="true" :idNoRoute="previewData.id"/>
      </template> 
    </template>
    <cus-empty v-else>请选择讲义预览</cus-empty>
  </div>
</template>

<script lang="ts">
import { computed, inject, onMounted, onUnmounted, ref, nextTick } from 'vue'
import { math } from '$'
import store from './store';
import $ from '$';
import HandoutPreviewComponent from '@/views/handout/index.vue';
import TestPaperPreview from '@/views/test-paper/update/index.vue'

export default {
  components: { HandoutPreviewComponent, TestPaperPreview },
  setup() {
    let timesList = computed(() => store.state.timesList);
    onMounted(() => {
      //默认展开并展示第一项
      timesList.value[0].showChilds = true
      if (timesList.value[0].exam) {
        timesList.value[0].type = 'exam'
        return previewType.value = 'exam', previewData.value = timesList.value[0].exam
      } else if (timesList.value[0].child) {
        timesList.value[0].type = 'handout'
        return previewType.value = 'handout', previewData.value = timesList.value[0].child
      } else if (timesList.value[0].homework) {
        timesList.value[0].type = 'homework'
        return previewType.value = 'homework', previewData.value = timesList.value[0].homework
      }
    })
    let planInfo = inject<{ subjectId: string, id: string }>('planInfo');
    let planInfos = computed(() => store.state.planInfo)
    let subjectId = planInfo ? planInfo!.subjectId : planInfos.value.subjectId
    const editContent = async (type, id) => {
      if (type === 'exam' || type === 'homework') {
        window.open(`./#/test-paper-edit/${false}/${id}/${true}`);
      } else if (type === 'handout') {
        window.open(`/#/handout/false/${id}/${subjectId}`)
      }
    };

    let basePath = $.utils.generatBasePath() + `furl=${import.meta.env.VITE_APP_BASE_URL}`;

    let [ activeHandout, setActiveHandout ] = $.useState(null);
    let [ handoutViewList ] = $.useState<any[]>([]);
    let previewType = ref()
    let previewData = ref()
    const preview = (type, content, idx) => {
      // if (handout.childs.length) {
        // !handoutViewList.value.some(({ handoutId }) => handoutId === handout.handoutId) && handoutViewList.value.push(handout);
      // }
      timesList.value[idx].type = type
      previewType.value = type 
      previewData.value = content
    }
    const __postMessageFn = ({ origin, data }) => {
      if (origin === window.location.origin && data.type === 'handout-save-success') {
        $.http.post('/admin/teachTimes/query', { planId: planInfo!.id }).then(res => store.commit('set_times_list', res.json));
      }
    };
    window.addEventListener('message', __postMessageFn);
    onUnmounted(() => window.removeEventListener('message', __postMessageFn));

    const toggleShow = (item) => { timesList.value.map(i => i.showChilds = i.id === item.id ? !item.showChilds: false); setActiveHandout(item.child) };


    return { timesList, math, editContent, preview, activeHandout, basePath, toggleShow, handoutViewList, previewType, previewData }
  }
}
</script>

<style lang="scss" scoped>
.nav-box {
  width: 326px;
  margin-right: 10px;
  background: #fff;
  box-shadow: 0px 1px 6px 0px rgba(91, 125, 255, .08);
  border-radius: 6px;
  border: 1px solid #EBF0FC;
  & > ul {
    height: calc(100% - 70px);
    overflow: auto;
  }
  & > h2 {
    height: 40px;
    margin: 20px 10px 10px;
    color: #fff;
    line-height: 40px;
    text-align: center;
    background: #72b22a;
    border-radius: 4px;
  }
  .title {
    display: flex;
    padding: 0 10px;
    line-height: 36px;
    border-bottom: solid 1px #DCDEE3;
    cursor: pointer;
    &.active {
      background: #F6F7F9;
    }
    i {
      color: #C0C4CC;
      line-height: 36px;
      margin-right: 5px;
    }
    p span {
      margin-right: 10px;
    }
    :deep(.el-button) {
      display: none;
      height: 24px;
      min-height: auto;
      padding: 5px 15px;
      margin-left: auto;
      margin-top: 6px;
      border-radius: 12px;
    }
    &:hover :deep(.el-button) {
      display: block;
    }
  }
  li {
    .item-child, .item-exam, .item-homework {
      padding: 10px 20px 0 30px; 
      cursor: pointer;
      display: flex;
      &.active {
        background: #F6F7F9;
      }
      p {
        line-height: 28px;
      }
      .tip {
        color: $--color-remind;
      }
      :deep(.el-button) {
        display: none;
        height: 24px;
        min-height: auto;
        padding: 5px 15px;
        border-radius: 12px;
      }
      &:hover :deep(.el-button) {
        display: block;
      }
      button {
        margin-left: auto;
      }
    }
    .type-file {
      display: flex;
      padding: 10px 20px 10px 40px;
      & > span {
        height: 28px;
      }
      & > p {
        flex: 1 1 28px;
        margin-left: 12px;
        color: #333;
        line-height: 28px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
      }
    }
    .type-other {
      .item-title {
        display: flex;
        line-height: 36px;
        padding-left: 40px;
        cursor: pointer;
        i {
          color: #999;
          font-size: 16px;
          line-height: inherit;
        }
        h4 {
          margin: 0 20px 0 10px;
          color: #FAAD14;
        }
      }
      .item-main {
        & > div {
          display: flex;
          padding-left: 78px;
          line-height: 36px;
          &:hover {
            background: #F5F7FA;
          }
          img {
            display: block;
            margin-right: 20px;
            height: 14px;
            margin-top: 20px;
          }
        }
      }
    }
  }
}
.content-box {
  flex: 1 1 326px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0px 1px 6px 0px rgba(91, 125, 255, .08);
  border: 1px solid #EBF0FC;
  overflow: hidden;
  position: relative;
  iframe {
    display: block;
    width: 100%;
    height: 100%;
  }
  & > div {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    :deep(.handout-paper > .content) {
      height: 100%;
    }
    :deep(.paper_container) {
      padding-top: 0;
      .handout-paper > .content {
        height: 100%;
      }
    }
  }
}
</style>
